<template>
	<view>
		<view class="status_bar_wrapper">
			<view class="status_bar">
			    <!-- 这里是状态栏 -->
			</view>
			<view class="page_title">消息中心</view>
		</view>
		<view class="message_page">
			<view class="page_top_bg">
			</view>
			
			<view class="status_bar" style="visibility: hidden;"></view>
			<view class="page_title" style="visibility: hidden;">消息中心</view>
			
			<view class="message_items flexRow">
				<!-- <navigator url="/pages/serviceList/serviceList">
					<view class="message_item flexCol">
						<image src="/static/img/service.png"></image>
						<view class="">口袋客服</view>
					</view>
				</navigator> -->
				
				<navigator url="/pages/oftenIssue/oftenIssue">
					<view class="message_item flexCol">
						<image src="/static/img/service.png"></image>
						<view class="">常见问题</view>
					</view>
				</navigator>
				<navigator url="/pages/feedback/feedback">
					<view class="message_item flexCol">
						<image src="/static/img/service.png"></image>
						<view class="">意见反馈</view>
					</view>
				</navigator>
			</view>
			<navigator url="/pages/noticeBoard/noticeBoard" class="message_col flexRow">
				<image class="message_col_icon" src="/static/img/col3.png" mode=""></image>
				<view class="message_col_center">
					<view class="message_col_top_text">
						系统公告
					</view>
					<view class="message_col_bottom_text">
						邀请好友帮你拆更多现金红包
					</view>
				</view>
				<view class="iconfont icon-right"></view>
			</navigator>
			<view class="service_list">
				<view class="service_label">
					qq客服:
				</view>
				<view class="service_item flexRow" v-for="(item,key) in kf">
					<view class="service_item_l flexRow">
						<image class="service_name" src="/static/img/seivice_name.png" mode=""></image>
						<view class="">
							<view class="name_title">
								客服{{key+1}}
							</view>
						<!-- 	<view class="name_text">
								小赞同学
							</view> -->
						</view>
					</view>
					<view class="service_item_r flexRow" :key="key" @tap="toQQ(item)">
						<image class="service_qq" src="/static/img/seivice_qq.png" mode=""></image>
						<view class="">
							<view class="name_title">
								{{item}}
							</view>
						<!-- 	<view class="name_text">
								88888888
							</view> -->
						</view>
					</view>
				</view>
				<view class="service_label">
					qq群:
				</view>
				<view class="service_item flexRow" v-for="(item,key) in group">
					<view class="service_item_l flexRow">
						<image class="service_name" src="/static/img/seivice_name.png" mode=""></image>
						<view class="">
							<view class="name_title">
								qq群{{key+1}}
							</view>
						</view>
					</view>
					<view class="service_item_r flexRow" :key="key" @tap="togroup(item)">
						<image class="service_qq" src="/static/img/seivice_qq.png" mode=""></image>
						<view class="">
							<view class="name_title">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="task_label flexRow">
					<image src="/static/img/task_lable.png"></image>
					<view>工作时间：</view>
				</view>
				<view class="work_time">
					周一至周五 9:00-21：00
				</view>
			</view>
	<!-- 		<view class="message_push flexRow">
				<view class="">
					<view class="message_push_top">
						开启推送通知
					</view>
					<view class="message_push_bottom">
						及时接收最新热门活动等消息
					</view>
				</view>
				<image src="/static/img/achieve2.png" mode=""></image>
				<view class="iconfont icon-right"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import request from '../../apiRequest/request.js'
	export default {
		data() {
			return {
				group: [],
				kf: []
			}
		},
		methods: {
			toQQ(item){
				plus.runtime.openURL('mqqapi://card/show_pslcard?src_type=internal&version=1&uin='+item, function(res) {
					console.log(res)
					if(res){
						uni.showToast({
						    title: '请确认是否安装QQ',
							icon: 'none',
						    duration: 2000
						})
					}
				})
			},
			togroup(item){
				plus.runtime.openURL('mqqapi://card/show_pslcard?src_type=internal&version=1&card_type=group&uin='+item, function(res) {
					console.log(res)
					if(res){
						uni.showToast({
						    title: '请确认是否安装QQ',
							icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		},
		onShow() {
			request.userInfo(false).then(res=>{
				console.log(res)
				let call = res.data.call;
				this.group = call.group
				this.kf = call.kf
				
			}).catch(err=>{
				this.$unexpected(err)
			})
			
		}
	}
</script>

<style>
.message_page{
	width: 100%;
	position: relative;
}
.status_bar_wrapper{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1000;
}
.page_top_bg{
	position: absolute;
	top: 0;
	width: 100%;
	height: 448rpx;
	background:rgba(4,137,255,1);
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	z-index: -1;
}
.page_title{
	font-size:34rpx;
	text-align: center;
	line-height: 54rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
}
.message_items{
	padding: 60rpx;
	justify-content: space-around;
}
.message_item{
	align-items: center;
}
.message_item>image{
	width: 80rpx;
	height: 80rpx;
}
.message_item>view{
	font-size:26rpx;
	line-height: 26rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
}
.message_col{
	margin: 0 20rpx;
	margin-bottom: 40rpx;
	padding: 40rpx;
	background:rgba(255,255,255,1);
	box-shadow:0 2rpx 14rpx 0 rgba(172,172,172,0.6);
	border-radius:10rpx;
	justify-content: space-between;
	align-items: center;
}
.message_col_icon{
	width: 100rpx;
	height: 100rpx;
}
.message_col_center{
	flex: 1;
	padding-left: 28rpx;
}
.icon-right{
	font-size: 56rpx;
}
.message_col_top_text{
	font-size:38rpx;
	line-height: 38rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(49,49,49,1);
	margin-bottom: 10rpx;
}
.message_col_bottom_text{
	font-size:26rpx;
	line-height: 26rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(116,120,124,1);
}
.message_push{
	margin: 0 20rpx;
	padding: 54rpx 40rpx;
	padding-right: 20rpx;
	background:rgba(248,249,251,1);
	align-items: center;
}
.message_push>image{
	width: 180rpx;
	height: 60rpx;
	margin-left: 32rpx;
	margin-right: 40rpx;
}
.message_push_top{
	font-size:38rpx;
	line-height: 38rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(49,49,49,1);
	margin-bottom: 10rpx;
}
.message_push_bottom{
	font-size:26rpx;
	line-height: 26rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(116,120,124,1);
}
.service_list{
	/* padding-top: 60rpx; */
}	
.service_item{
	align-items: center;
	box-sizing: border-box;
	padding-left: 40rpx;
	margin-bottom: 60rpx;
}
.service_item_l,.service_item_r{
	flex: 1;
	align-items: center;
}
.name_title{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
}
.name_text{
	font-size:22rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(100,100,100,1);
}
.service_name{
	width: 68rpx;
	height: 70rpx;
	margin-right: 20rpx;
}
.service_qq{
	width: 69rpx;
	height: 80rpx;
	margin-right: 20rpx;
}
.divider{
	width:100%;
	height:1rpx;
	background:rgba(238,238,238,1);
}
.task_label{
	padding-left: 20rpx;
}
.work_time{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
	line-height:54rpx;
	padding-left: 40rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
}
.service_label{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	margin: 20rpx 0;
	padding-left: 20rpx;
}
</style>
